<template>
           <el-table 
				:header-cell-style="{color:'#2A62BC'}"
				:data="tableData"   
				style="width: 100%;" 
				size="small"
                :span-method="objectSpanMethod"
				border>
					<el-table-column  prop="courseStage" label="课程阶段"  ></el-table-column>
						<el-table-column prop="rank" label="排序"></el-table-column>
						<el-table-column prop="courseName" label="课程名称"></el-table-column>
						<el-table-column label="操作"  align="center" >
							<template #default="scope">							
								<el-row class="right-btn">			
									<el-tooltip content="删除" placement="bottom-start" effect="light">  
										<el-button color="#e35148" :icon="Delete"  @click="courseDelete(scope.$index)" ></el-button>
									</el-tooltip>
									<el-tooltip content="上移" placement="bottom-start" effect="light">   
										<el-button color="#1ab394"  @click="moveUp(scope.row)" ><i class="iconfont icon-up-arrow white"></i></el-button>
									</el-tooltip>
									<el-tooltip content="下移" placement="bottom-start" effect="light">   
										<el-button color="#1ab394"  @click="moveDown(scope.row)" ><i class="iconfont icon-down-arrow white"></i></el-button>
									</el-tooltip>
								</el-row>
							
						</template>
				</el-table-column>
			</el-table>
            <div class="pagination">
				<el-pagination
				:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:page-sizes="[5, 10, 15, 20]"
					size="small"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pageTotal"
					@size-change="handleSizeChange"
					@current-change="handlePageChange"/>
			</div>

</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Setting} from '@element-plus/icons-vue';
import {getAllocation} from '../../api/training' ;

const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}) => {
    const columnsToSpan = ['courseStage', 'rank', 'courseName']; // 列名数组
                    if (columnsToSpan.includes(column.property)) {
                        if (rowIndex === 0 || row[column.property] !== tableData.value[rowIndex - 1][column.property]) {
                            // 如果是相同 "NAME" 的第一行，则返回正确的 rowspan 和 colspan
                            let rowspan = 1;
                            for (let i = rowIndex + 1; i < tableData.value.length; i++) {
                                if (tableData.value[i][column.property] === row[column.property]) {
                                    rowspan++;
                                    tableData.value[i]._rowspan = 0; // 隐藏后续行的 ""
                                } else {
                                    break;
                                }
                            }
                            return {
                                rowspan,
                                colspan: 1
                            };
                        }
                        return {
                            rowspan: 0,
                            colspan: 0
                        }; // 隐藏相同 "NAME" 的后续行
                    }
                    return {
                        rowspan: 1,
                        colspan: 1
                    }; 
}

//分页数据
const query = reactive({
	pageIndex: 1,
	pageSize: 5,
});
//
//分页字体
const small = ref(true)
//表格数据
const tableData = ref();
//总页数
const pageTotal = ref(0);

//设置方案数据
const settingData1= [
{
    "id": 1,
    "courseNumber": 1,
    "courseName": 21,
    "schemaName": "android",
    "courseStage": "第一阶段",
    "rank": 1,
    "courseName": "java核心技术一"
  },
]


// 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
const getData = () => {
    getAllocation({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
        console.log(res,"---res---")
        // tableData.value = res.data.
		let start  = (query.pageIndex-1)*query.pageSize;//开始位置
        let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
        tableData.value = res.data.slice(start,end);
        // tableData.value = res.data;
        pageTotal.value = res.data.length
    })
	
};
getData();
// 分页导航
const handleSizeChange = (val) => {
  // console.log(`${val} items per page`)
  query.pageSize = val;
  getData()
}
const handlePageChange = (val) => {
	query.pageIndex = val;
	console.log(val,"==")
	console.log(query.pageSize)
	getData()
};

//课程删除
const courseDelete=(index)=>{
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	})
	.then(() => {
		ElMessage.success('删除成功');
		//to 传递id 到后台 
		//settingData1.splice(index, 1);
		// 删除成功后
		// getData()
	})
	.catch(() => {});
}
//上移
const  moveUp=(row)=>{
	ElMessageBox.alert('上移','127.0.0.5173:显示',{
		confirmButtonText: 'OK',
    // callback: (action) => {
    //   ElMessage({
    //     type: 'info',
    //     message: `action: ${action}`,
    //   })
    // },
	})
}
//下移
const moveDown =(row)=>{
	ElMessageBox.alert('下移','127.0.0.5173:显示',{
		confirmButtonText: 'OK',
    // callback: (action) => {
    //   ElMessage({
    //     type: 'info',
    //     message: `action: ${action}`,
    //   })
    // },
	})
}
</script >
<style lang="less" scoped>
.right-btn{
 	justify-content:center;
	.el-button{
		height: 22px;
		width: 20px;
		margin-left: 15px;
		padding: 1px 5px;
	}
}
.white{
	color:#fff;
}
</style>